@model GoogleMapsMVC.Models.GoogleMarker

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>
<script>
    
    function initialize() {
        /*
        * Objeto : google.maps.Map
        */
        //Variables para inicializar objeto Map
        var Latitude = 20.58879300000027;
        var Longitude = -100.38988800000769;
        var myLatlng = new google.maps.LatLng(Latitude, Longitude);
        var markersArray = [];
        //Options iniciales de objeto Map
        var mapOptions = {
            zoom: 5,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //Creamos objeto en #map_canvas
        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        /*
        * Objeto : google.maps.Marker
        */
        //Declaramos un nuevo Marker
        var marker = new google.maps.Marker({
            position: myLatlng,
            draggable: true,
            title:"Nuevo Marker!",
            animation: google.maps.Animation.DROP
        });        
        //Asignamos nuestro Marker a objeto Map en #map_canvas
        marker.setMap(map);
        //Agregamos marker a array
        markersArray.push(marker);
        //Definimos DRAGEND de marker
        google.maps.event.addListener(marker, 'dragend', function () {
            geocodePosition(marker.getPosition());
        });
        //Definimos CLICK de marker
        google.maps.event.addListener(map, "click", function (event) {
            // place a marker
            placeMarker(event.latLng);

            // display the lat/lng in your form's lat/lng fields
            document.getElementById("Latitude").value = event.latLng.lat();
            document.getElementById("Longitude").value = event.latLng.lng();
            geocodePosition(event.latLng);
        });

        function geocodePosition(pos) {
            geocoder = new google.maps.Geocoder();
            geocoder.geocode
             ({
                 latLng: pos
             },
                 function (results, status) {
                     if (status == google.maps.GeocoderStatus.OK) {
                         $("#SiteName").val(results[0].formatted_address);
                         $("#Latitude").val(results[0].geometry.location.lat())
                         $("#Longitude").val(results[0].geometry.location.lng())
                         $("#InfoWindow").val(results[0].formatted_address);
                         $("#mapErrorMsg").hide(100);
                         //alert(results[0].geometry.location.lat());
                     }
                     else {
                         $("#mapErrorMsg").html('Cannot determine address at this location.' + status).show(100);
                     }
                 }
             );
        }       

        function placeMarker(location) {
            // first remove all markers if there are any
            deleteOverlays();

            var marker = new google.maps.Marker({
                position: location,
                map: map
            });

            // add marker in markers array
            markersArray.push(marker);

            //map.setCenter(location);
        }

        // Deletes all markers in the array by removing references to them
        function deleteOverlays() {
            if (markersArray) {
                for (i in markersArray) {
                    markersArray[i].setMap(null);
                }
                markersArray.length = 0;
            }
        }
    }
    //Carga Asincrona de API
    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDK1L5bVyXN6LvHOV-Hpo0YucggsEDXp9o&sensor=false&' + 'callback=initialize';
        document.body.appendChild(script);
    }

    

    //Llamada -> Carga Asincrona de API
    window.onload = loadScript;
</script>
<div id="map_canvas" style="height:300px;width:100%;"></div>
@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset class="form-horizontal">
        <legend>GoogleMarker</legend>

        <div class="control-group">
            @Html.LabelFor(model => model.SiteName, new { @class = "control-label" })
			<div class="controls">
				@Html.EditorFor(model => model.SiteName)
				@Html.ValidationMessageFor(model => model.SiteName, null, new { @class = "help-inline" })
			</div>
		</div>

        <div class="control-group">
            @Html.LabelFor(model => model.Latitude, new { @class = "control-label" })
			<div class="controls">
				@Html.EditorFor(model => model.Latitude)
				@Html.ValidationMessageFor(model => model.Latitude, null, new { @class = "help-inline" })
			</div>
		</div>

        <div class="control-group">
            @Html.LabelFor(model => model.Longitude, new { @class = "control-label" })
			<div class="controls">
				@Html.EditorFor(model => model.Longitude)
				@Html.ValidationMessageFor(model => model.Longitude, null, new { @class = "help-inline" })
			</div>
		</div>

        <div class="control-group">
            @Html.LabelFor(model => model.InfoWindow, new { @class = "control-label" })
			<div class="controls">
				@Html.EditorFor(model => model.InfoWindow)
				@Html.ValidationMessageFor(model => model.InfoWindow, null, new { @class = "help-inline" })
			</div>
		</div>

        <div class="form-actions no-color">
            <input type="submit" value="Create" class="btn" />
        </div>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

